<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>M-Table 增强实现 | marathon</title>
    <meta name="generator" content="VuePress 1.8.2">  <meta name="description" content="马拉松项目，一个很牛逼的前端项目。承载着重百乃至更多的项目的基础框架建设，是公司前端规划的基石。马拉松表面的42.195公里，背后是无数个马拉松的努力，望以此与诸君共勉。">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <link rel="preload" href="/assets/css/0.styles.0fd2c289.css" as="style"><link rel="preload" href="/assets/js/app.bca092fe.js" as="script"><link rel="preload" href="/assets/js/2.bcfbeac3.js" as="script"><link rel="preload" href="/assets/js/3.1c9abd66.js" as="script"><link rel="preload" href="/assets/js/5.74bd5f86.js" as="script"><link rel="prefetch" href="/assets/js/4.59c3b4a1.js"><link rel="prefetch" href="/assets/js/6.68edde6e.js"><link rel="prefetch" href="/assets/js/7.d92464eb.js"><link rel="prefetch" href="/assets/js/8.346cd128.js"><link rel="prefetch" href="/assets/js/9.4812d203.js"> <link rel="stylesheet" href="/assets/css/0.styles.0fd2c289.css">
</head>

<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><div><header><div class="note-row layout-header"><div class="note-col note-navbar-left"><button type="button" class="sidebar-button"><span class="sidebar-button-content"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></span></button> <a href="/" class="home-link router-link-active"><span class="site-name">marathon</span></a></div> <div class="note-col note-navbar-right"><div class="search" style="width:30%;"><div class="searchbox"><div class="searchbox-icon"><svg t="1587518432004" color="rgba(0,0,0,.6)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1873" class="icon"><path d="M946.155051 895.382691l-186.037067-186.032974c56.195883-67.547419 89.998757-154.376996 89.998757-249.113661 0-215.247342-174.49315-389.741515-389.746632-389.741515-215.247342 0-389.741515 174.49315-389.741515 389.741515 0 215.252459 174.49315 389.746632 389.741515 389.746632 95.768157 0 183.461405-34.540677 251.317862-91.841731l185.853895 185.853895c6.710842 6.714935 15.505136 10.067286 24.304546 10.067286 8.794293 0 17.593703-3.357468 24.307615-10.067286C959.576735 930.575214 959.576735 908.808468 946.155051 895.382691L946.155051 895.382691zM460.370109 781.233907c-43.363623 0-85.392856-8.476045-124.920104-25.195845-38.217417-16.166191-72.554456-39.321564-102.054327-68.821435-29.504988-29.504988-52.655244-63.836911-68.821435-102.054327-16.720823-39.529295-25.195845-81.561597-25.195845-124.925221 0-43.363623 8.476045-85.392856 25.195845-124.925221 16.166191-38.2123 39.316447-72.550363 68.821435-102.050234 29.499871-29.504988 63.836911-52.66036 102.054327-68.821435 39.528272-16.7198 81.556481-25.195845 124.920104-25.195845s85.395926 8.476045 124.925221 25.195845c38.217417 16.161075 72.554456 39.316447 102.054327 68.821435 29.499871 29.499871 52.655244 63.831794 68.820412 102.050234 16.721847 39.529295 25.196869 81.561597 25.196869 124.925221 0 43.363623-8.476045 85.395926-25.196869 124.925221-16.164145 38.217417-39.315424 72.550363-68.820412 102.054327-29.499871 29.499871-63.836911 52.655244-102.054327 68.821435C545.767058 772.758885 503.734756 781.233907 460.370109 781.233907L460.370109 781.233907zM460.370109 781.233907" p-id="1874"></path></svg></div> <div class="searchbox-content"><input type="text" name="search" autocomplete="off" aria-label="Search" value=""></div> <!----></div></div> <div class="navlinks can-hide"><!----></div></div></div></header> <main><div class="note-sidebar animated fadeInLeft faster"> <ul class="note-sidebar-links"><li><a href="/component/m-table.html" aria-current="page" class="active sidebar-link">M-Table 增强实现</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/directvie/m-delay.html" class="sidebar-link">v-MDelay 按钮节流指令</a></li><li><a href="/extend/setData.html" class="sidebar-link">$setData 扩展函数</a></li></ul> </div> <div class="note-page" style="padding-left:252px;"> <div class="theme-note-content content__default"><p>设计手稿:</p> <ul><li>增强部分属性统一设置能力，起因是element-ui table列宽设置繁琐</li> <li>增强字段可维护性，当表格字段超过15个之后代码友好度...</li> <li>增强函数渲染解析能力</li> <li>降低页面代码复杂程度，列配置可与页面分离，可以抽离公共部分独立共用</li> <li>提供部分特殊能力，提高开发效率</li></ul> <h3 id="基础用法"><a href="#基础用法" class="header-anchor">#</a> 基础用法</h3> <div class="demo-block demo-component demo-m-table.html"><div class="source"><div><m-table data="[object Object],[object Object]" columns="[object Object],[object Object],[object Object],[object Object],[object Object]"></m-table></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableConfig<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                dataList<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'columns'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'列配置项'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'数据列表'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

                <span class="token punctuation">]</span><span class="token punctuation">,</span>
                tableConfig<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'属性'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token string">'90px'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token string">'描述'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'类型'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'必填'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'val'</span><span class="token punctuation">,</span> <span class="token string">'默认值'</span><span class="token punctuation">)</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">展开</span></div></div><h3 id="单选"><a href="#单选" class="header-anchor">#</a> 单选</h3> <p>只需要开启row-radio，不需要额外新增代码，选中后返回整列，同时也提供事件反馈。</p> <div class="demo-block demo-component demo-m-table.html"><div class="source"><div><m-table data="[object Object],[object Object]" columns="[object Object],[object Object],[object Object],[object Object],[object Object]" row-radio=""></m-table></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableConfig<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">v-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">row-radio</span> <span class="token attr-name">:radioItem.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectItem<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@radio-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onRadioChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                <span class="token comment">//单选数据行</span>
                selectItem<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
                dataList<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'columns'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'列配置项'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'数据列表'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

                <span class="token punctuation">]</span><span class="token punctuation">,</span>
                tableConfig<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'属性'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token string">'90px'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token string">'描述'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'类型'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'必填'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'val'</span><span class="token punctuation">,</span> <span class="token string">'默认值'</span><span class="token punctuation">)</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token operator">:</span><span class="token punctuation">{</span>
            <span class="token function">onRadioChange</span><span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">展开</span></div></div><h3 id="多选"><a href="#多选" class="header-anchor">#</a> 多选</h3> <div class="demo-block demo-component demo-m-table.html"><div class="source"><div><m-table data="[object Object],[object Object]" columns="[object Object],[object Object],[object Object],[object Object],[object Object]" rowCheckBox=""></m-table></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableConfig<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@selection-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTableSelection<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rowCheckBox</span> <span class="token attr-name">v-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                dataList<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'columns'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'列配置项'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'数据列表'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

                <span class="token punctuation">]</span><span class="token punctuation">,</span>
                tableConfig<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'属性'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token string">'90px'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'类型'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token string">'描述'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'必填'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'val'</span><span class="token punctuation">,</span> <span class="token string">'默认值'</span><span class="token punctuation">)</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function">onTableSelection</span><span class="token punctuation">(</span><span class="token parameter">rowList</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>rowList<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">展开</span></div></div><h3 id="自定义函数解析"><a href="#自定义函数解析" class="header-anchor">#</a> 自定义函数解析</h3> <p>请观察<code>类型</code>颜色</p> <blockquote><p>下例中render函数的第二个参数h，使用方法同vue createElement函数。</p></blockquote> <h3 id=""><a href="#" class="header-anchor">#</a></h3> <div class="demo-block demo-component demo-m-table.html"><div class="source"><div><m-table data="[object Object],[object Object],[object Object]" columns="[object Object],[object Object],[object Object],[object Object],[object Object]"></m-table></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableConfig<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                dataList<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'columns'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'列配置项'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'数据列表'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'border'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示边框'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

                <span class="token punctuation">]</span><span class="token punctuation">,</span>
                tableConfig<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'属性'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token string">'90px'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'类型'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                        <span class="token function-variable function">render</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>type<span class="token punctuation">}</span><span class="token punctuation">,</span> h</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                            <span class="token comment">//h函数使用方法同vue createElement</span>
                            <span class="token keyword">let</span> conf <span class="token operator">=</span> <span class="token punctuation">{</span>
                                style<span class="token operator">:</span> <span class="token punctuation">{</span>
                                    color<span class="token operator">:</span> type <span class="token operator">==</span> <span class="token string">'Array'</span> <span class="token operator">?</span> <span class="token string">'#409eff'</span> <span class="token operator">:</span> <span class="token string">'#f59a3c'</span><span class="token punctuation">,</span>
                                    cursor<span class="token operator">:</span> <span class="token string">&quot;pointer&quot;</span><span class="token punctuation">,</span>
                                    userSelect<span class="token operator">:</span> <span class="token string">&quot;none&quot;</span>
                                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                                on<span class="token operator">:</span> <span class="token punctuation">{</span>
                                    <span class="token function-variable function">click</span><span class="token operator">:</span> <span class="token parameter">_</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                                       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onTypeClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                                    <span class="token punctuation">}</span>
                                <span class="token punctuation">}</span>
                            <span class="token punctuation">}</span>
                            <span class="token comment">//标签，配置，值    </span>
                            <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">,</span> conf<span class="token punctuation">,</span> type<span class="token punctuation">)</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token string">'描述'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'必填'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'val'</span><span class="token punctuation">,</span> <span class="token string">'默认值'</span><span class="token punctuation">)</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function">onTypeClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'触发了点击事件'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">展开</span></div></div><h3 id="table属性说明"><a href="#table属性说明" class="header-anchor">#</a> Table属性说明：</h3> <p>下面的例子描述table的基本属性，并对<code>列管理</code>和<code>表头吸顶</code>做演示。</p> <div class="demo-block demo-component demo-m-table.html"><div class="source"><div><m-table data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" columns="[object Object],[object Object],[object Object],[object Object],[object Object]" border="" show-menu="" head-lock="[object Object]"></m-table></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableConfig<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span> <span class="token attr-name">show-menu</span> <span class="token attr-name">:head-lock</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{top:72,zIndex:9}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
                dataList<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'columns'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'列名配置'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Col&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'数据列表'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;true&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'loading'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'加载效果'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'border'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示边框'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'colWidth'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'统一设定列宽（如：100px）'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;String&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'colMinWidth'</span><span class="token punctuation">,</span>desc<span class="token operator">:</span> <span class="token string">'最小列宽，未设定列宽时超过设定值，表格将自适应。'</span><span class="token punctuation">,</span>type<span class="token operator">:</span> <span class="token string">&quot;string&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span>val<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'emptyText'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'空列表提示语'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;String&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'暂无数据'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'rowCheckBox'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示多选框'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'rowRadio'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示单选按钮'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'selectable'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'单选/多选是否可用'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Function&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'maxHeight'</span><span class="token punctuation">,</span>desc<span class="token operator">:</span> <span class="token string">'表格最大高度，内容超过此高度将显示滚动条'</span><span class="token punctuation">,</span>type<span class="token operator">:</span> <span class="token string">&quot;String｜Number&quot;</span><span class="token punctuation">,</span>required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span>val<span class="token operator">:</span> <span class="token string">'null'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'height'</span><span class="token punctuation">,</span>desc<span class="token operator">:</span> <span class="token string">'表格固定高度，内容超过此高度将显示滚动条'</span><span class="token punctuation">,</span>type<span class="token operator">:</span> <span class="token string">&quot;String｜Number&quot;</span><span class="token punctuation">,</span>required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span>val<span class="token operator">:</span> <span class="token string">'null'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'stripe'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示斑马纹'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'headLock'</span><span class="token punctuation">,</span>desc<span class="token operator">:</span> <span class="token string">'是否启用表头Fixed锁定。除boolean外还可以接受一个对象&lt;span style=&quot;color:#999&quot;&gt;{top:100,zIndex:99}&lt;/span&gt;来控制表头锁定时的顶部距离及堆叠层级，&lt;div&gt;&lt;font color=&quot;red&quot;&gt;请勿与autoHeightFull同用&lt;/font&gt;&lt;/div&gt;'</span><span class="token punctuation">,</span>type<span class="token operator">:</span> <span class="token string">&quot;Boolean | Object&quot;</span><span class="token punctuation">,</span>required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span>val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'autoHeightFull'</span><span class="token punctuation">,</span>desc<span class="token operator">:</span> <span class="token string">'自动计算Tabel高度，内容超出此高度自动显示滚动条。该高度为当前窗口高度减去Table顶部内容高度。窗口缩放时自动计算。'</span><span class="token punctuation">,</span>type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span>required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span>val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'showIndex'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示序号'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'showMenu'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示列管理控件'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'showSummary'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否在表尾显示合计行'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'tableRowClassName'</span><span class="token punctuation">,</span>desc<span class="token operator">:</span> <span class="token string">'行的 className 的回调方法，为所有行设置一个固定的 className'</span><span class="token punctuation">,</span>type<span class="token operator">:</span> <span class="token string">&quot;Function&quot;</span><span class="token punctuation">,</span>required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span>val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
                tableConfig<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'属性'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token string">'描述'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token string">&quot;150px&quot;</span><span class="token punctuation">,</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>desc<span class="token punctuation">}</span><span class="token punctuation">,</span>h</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                            <span class="token keyword">let</span> conf <span class="token operator">=</span> <span class="token punctuation">{</span>
                                domProps<span class="token operator">:</span><span class="token punctuation">{</span>
                                    innerHTML<span class="token operator">:</span>desc
                                <span class="token punctuation">}</span>
                            <span class="token punctuation">}</span>
                            <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span>conf<span class="token punctuation">)</span>
                        <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'类型'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'必填'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'val'</span><span class="token punctuation">,</span> <span class="token string">'默认值'</span><span class="token punctuation">)</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">展开</span></div></div><h3 id="table事件说明"><a href="#table事件说明" class="header-anchor">#</a> Table事件说明：</h3> <p>除elementUI table事件外，还提供radio-change事件。</p> <h3 id="列属性说明"><a href="#列属性说明" class="header-anchor">#</a> 列属性说明：</h3> <p>列对象Col为系统全局对象，包含3个参数，分别是：字段名，列名，列配置项；<br>
例： new Col('desc', '描述', {minWidth: &quot;150px&quot;})<br>
列配置项属性如下：</p> <div class="demo-block demo-component demo-m-table.html"><div class="source"><div><m-table data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" columns="[object Object],[object Object],[object Object],[object Object],[object Object]" head-lock="[object Object]"></m-table></div></div> <div class="meta"><!----> <div class="highlight"><div class="language-html extra-class"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dataList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableConfig<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:head-lock</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{top:72,zIndex:9}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                dataList<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'align'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'对齐方式'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;String&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'固定列宽'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'minWidth'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'最小列宽'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;String&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'filters'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Array&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'filterMethod'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Function&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'fixed'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'列是否固定在左侧或者右侧，true 表示固定在左侧'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'visible'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'是否显示当前列，table开启showMenu属性时生效'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;boolean&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'true'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'render'</span><span class="token punctuation">,</span> desc<span class="token operator">:</span> <span class="token string">'自定义渲染函数,render(@row,@createElement),关于@createElement的使用方法请参考vue createElement相关文档'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">&quot;Function&quot;</span><span class="token punctuation">,</span> required<span class="token operator">:</span> <span class="token string">&quot;false&quot;</span><span class="token punctuation">,</span> val<span class="token operator">:</span> <span class="token string">'--'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
                tableConfig<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'属性'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token string">'90px'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token string">'描述'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span> <span class="token string">'类型'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'必填'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                    <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token string">'val'</span><span class="token punctuation">,</span> <span class="token string">'默认值'</span><span class="token punctuation">)</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">.demo-table-expand</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.demo-table-expand label</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 90px<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #99a9bf<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.demo-table-expand .el-form-item</span> <span class="token punctuation">{</span>
        <span class="token property">margin-right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control"><i class="el-icon-caret-bottom"></i> <span style="display:none;">展开</span></div></div></div> <div class="box" data-v-49b98ccd><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd>基础用法</div></div><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd>单选</div></div><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd>多选</div></div><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd>自定义函数解析</div></div><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd></div></div><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd>table属性说明</div></div><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd>table事件说明</div></div><div data-v-49b98ccd><div class="tag-link" data-v-49b98ccd>列属性说明</div></div></div> <!----> </div></main></div></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.bca092fe.js" defer></script><script src="/assets/js/2.bcfbeac3.js" defer></script><script src="/assets/js/3.1c9abd66.js" defer></script><script src="/assets/js/5.74bd5f86.js" defer></script>
</body>

</html>